import * as echarts from 'echarts'
export const Option1 = () => {
  const data1 = [
    [150, 100, 170, 200, 150, 100, 170, 200, 150, 100, 170, 200],
    [50, 160, 90, 200, 50, 160, 90, 200, 50, 160, 90, 200],
  ]
  // 总数
  const data2 = [200, 260, 260, 400, 200, 260, 260, 400, 200, 260, 260, 400]
  const colorList = ['rgba(117, 174, 254, 1)', 'rgba(117, 254, 249, 1)']
  const colorList2 = ['rgba(88, 138, 252, 1)', 'rgba(88, 223, 252, 1)']
  const sumList: number[] = []
  const cycleName = ['生活用水', '生产用水']
  const dateList = [
    '1月',
    '2月',
    '3月',
    '4月',
    '5月',
    '6月',
    '7月',
    '8月',
    '9月',
    '10月',
    '11月',
    '12月',
  ]
  const series: any = []
  cycleName.forEach((item, index) => {
    series.push({
      name: item,
      type: 'bar',
      stack: '总量',
      zlevel: 1,
      label: {
        show: index === 1,
        position: 'right',
        formatter: (params: any[]) => {},
        textStyle: {
          color: '#fff',
          fontSize: 22,
          padding: [10, 0, 0, 0],

          rich: {
            a: {
              color: '#fff',
              fontSize: 36,
              fontStyle: 'italic',
            },
          },
        },
      },
      itemStyle: {
        normal: {
          barBorderRadius: 10,
          color: (params: any) => {
            const i = JSON.parse(JSON.stringify(index))
            // return colorList[i]
            return new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                { offset: 0, color: colorList[i] },
                { offset: 1, color: colorList2[i] },
              ],
              false
            )
          },
        },
      },
      barWidth: 10,
      data: data1[index],
    })
  })

  const option = {
    legend: {
      icon: 'circle',
      orient: 'horizontal',
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 120,
      top: '22px',
      textStyle: {
        color: '#A9CBDF',
        fontSize: 17,
      },

      data: [
        {
          name: '生活用水',
          icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
        },
        {
          name: '生产用水',
          icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
        },
      ],
    },

    grid: {
      left: '0px',
      right: '32px',
      bottom: '0px',
      top: '46px',
      containLabel: true,
    },
    tooltip: {
      show: true,
      backgroundColor: '#02090d',
      borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: 'rgba(17, 27, 54, 1)',
        },
      },
      y: 'center',
      textStyle: {
        color: '#879DB3',
        fontSize: 17,
      },
    },

    xAxis: {
      show: true,
      type: 'value',

      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: 'rgba(169, 203, 223, 1)', //底部文字颜色
          fontSize: 17,
        },
      },
      max: 500,
      //坐标轴线样式
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid', //solid实线;dashed虚线
          color: 'rgba(36, 173, 254, 0.2)',
          opacity: 0.8,
        },
      },
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,

        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: 'rgba(135,157,179,.1)',
            opacity: 0.1,
          },
        },
        axisLabel: {
          color: '#A4D5FF',
          fontSize: 17,
        },
        axisLine: {
          lineStyle: {
            show: true,
            lineStyle: {
              color: 'rgba(135, 157, 179, 1)',
            },
          },
        },
        axisTick: {
          show: false,
        },

        data: dateList,
      },
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: sumList,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: ['#fff'],
          align: 'left',
          verticalAlign: 'center',
          fontSize: 14,
          formatter: function (value: any, index: any) {
            return value
          },
        },
      },
    ],
    series: series,
  }
  return option
}
export const Option2 = () => {
  const data1 = [
    [150, 100, 170, 200, 150, 100, 170, 200, 150, 100, 170, 200],
    [50, 160, 90, 200, 50, 160, 90, 200, 50, 160, 90, 200],
    [150, 260, 190, 200, 50, 160, 90, 200, 50, 160, 90, 200],
  ]
  // 总数
  const data2 = [200, 260, 260, 400, 200, 260, 260, 400, 200, 260, 260, 400]
  const colorList = [
    'rgba(92, 143, 252, 0.2)',
    'rgba(252, 204, 88, 0.2)',
    'rgba(88, 223, 252, 0.2)',
  ]
  const colorList2 = [
    'rgba(128, 196, 254, 1)',
    'rgba(252, 204, 88, 1)',
    'rgba(117, 254, 249, 1)',
  ]

  const sumList: number[] = []
  const cycleName = ['居民生活', '农业生产', '工商业及其它']
  const dateList = [
    '1月',
    '2月',
    '3月',
    '4月',
    '5月',
    '6月',
    '7月',
    '8月',
    '9月',
    '10月',
    '11月',
    '12月',
  ]
  const series: any = []
  cycleName.forEach((item, index) => {
    series.push({
      name: item,
      type: 'bar',
      stack: '总量',
      barMaxWidth: 15,
      barGap: '10%',
      zlevel: 1,
      label: {
        show: index === 2,
        position: 'right',
        formatter: (params: any[]) => {},
        textStyle: {
          color: '#fff',
          fontSize: 22,
          padding: [10, 0, 0, 0],

          rich: {
            a: {
              color: '#fff',
              fontSize: 36,
              fontStyle: 'italic',
            },
          },
        },
      },
      itemStyle: {
        normal: {
          color: (params: any) => {
            const i = JSON.parse(JSON.stringify(index))
            // return colorList[i]
            return new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                { offset: 0, color: colorList[i] },
                { offset: 1, color: colorList2[i] },
              ],
              false
            )
          },
        },
      },
      data: data1[index],
    })
  })

  const option = {
    legend: {
      icon: 'circle',
      orient: 'horizontal',
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 120,
      top: '22px',
      textStyle: {
        color: '#A9CBDF',
        fontSize: 17,
      },

      data: [
        {
          name: '居民生活',
          icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
        },
        {
          name: '农业生产',
          icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
        },
        {
          name: '工商业及其它',
          icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
        },
      ],
    },

    grid: {
      left: '0px',
      right: '32px',
      bottom: '0px',
      top: '66px',
      containLabel: true,
    },
    tooltip: {
      show: true,
      backgroundColor: '#02090d',
      borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: 'rgba(17, 27, 54, 1)',
        },
      },
      y: 'center',
      textStyle: {
        color: '#879DB3',
        fontSize: 17,
      },
    },

    xAxis: {
      show: true,
      type: 'value',

      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: 'rgba(169, 203, 223, 1)', //底部文字颜色
          fontSize: 17,
        },
      },
      max: 500,
      //坐标轴线样式
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid', //solid实线;dashed虚线
          color: 'rgba(36, 173, 254, 0.2)',
          opacity: 0.8,
        },
      },
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,

        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: 'rgba(135,157,179,.1)',
            opacity: 0.1,
          },
        },
        axisLabel: {
          color: '#A4D5FF',
          fontSize: 17,
        },
        axisLine: {
          lineStyle: {
            show: true,
            lineStyle: {
              color: 'rgba(135, 157, 179, 1)',
            },
          },
        },
        axisTick: {
          show: false,
        },

        data: dateList,
      },
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: sumList,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: ['#fff'],
          align: 'left',
          verticalAlign: 'center',
          fontSize: 14,
          formatter: function (value: any, index: any) {
            return value
          },
        },
      },
    ],
    series: series,
  }
  return option
}
